<template>
  <div class="app-container">
    <!-- 设备列表页面 -->
    <el-card>
      <el-form :model="searchForm" label-position="left"  class="search-form">
        <el-row :gutter="20">
          <el-col :span="3">
            <el-form-item label="设备编号/名称" label-width="100px">
              <el-input v-model="searchForm.equipmentInfo" placeholder="设备编号/名称" clearable style="width: 100%" />
            </el-form-item>
          </el-col>

          <el-col :span="3">
            <el-form-item label="设备类型">
              <el-select v-model="searchForm.equipmentType" placeholder="设备类型" clearable style="width: 100%">
                <el-option v-for="item in equipmentTypeOptions" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="3">
            <el-form-item label="设备状态">
              <el-select v-model="searchForm.equipmentStatus" placeholder="设备状态" clearable style="width: 100%">
                <el-option v-for="item in equipmentStatusOptions" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="3">
            <el-form-item label="所属区域">
              <el-select v-model="searchForm.area" placeholder="所属区域" clearable style="width: 100%">
                <el-option v-for="item in areaOptions" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="3">
            <el-form-item label="日期范围">
              <el-date-picker v-model="searchForm.dateRange" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" style="width: 100%" />
            </el-form-item>
          </el-col>

          <el-col :span="3">
            <el-form-item label="设备型号">
              <el-input v-model="searchForm.model" placeholder="设备型号" clearable style="width: 100%" />
            </el-form-item>
          </el-col>

          <el-col :span="3">
            <el-form-item label="安装位置">
              <el-input v-model="searchForm.location" placeholder="安装位置" clearable style="width: 100%" />
            </el-form-item>
          </el-col>

          <el-col :span="3">
              <el-button type="primary" @click="handleSearch">搜索</el-button>
              <el-button @click="resetSearch" style="margin-left: 8px;">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card class="mt-2">
      <!-- 搜索区域 -->
      <div>
        <el-button type="primary" @click="showAddDialog">新增设备</el-button>
      </div>
      <!-- 设备表格 -->
      <el-table class="mt-2" :data="equipmentList" border style="width: 100%" v-loading="loading"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="equipmentId" label="设备编号" />
        <el-table-column prop="equipmentName" label="设备名称" />
        <el-table-column prop="equipmentType" label="设备类型">
          <template #default="{ row }">
            {{ getDictLabel(equipmentTypeOptions, row.equipmentType) }}
          </template>
        </el-table-column>
        <el-table-column prop="model" label="型号" />
        <el-table-column prop="equipmentStatus" label="运行状态">
          <template #default="{ row }">
            <el-tag :type="getStatusTagType(row.equipmentStatus)">
              {{ getDictLabel(equipmentStatusOptions, row.equipmentStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="useYear" label="使用年限" />
        <el-table-column prop="area" label="所属区域">
          <template #default="{ row }">
            {{ getDictLabel(areaOptions, row.area) }}
          </template>
        </el-table-column>
        <el-table-column prop="location" label="安装位置" />
        <el-table-column prop="maintenanceCycle" label="维护周期" />
        <el-table-column label="操作" fixed="right" width="220">
          <template #default="{ row }">
            <el-button size="small" type="primary" @click="showEquipmentDetail(row)">详情</el-button>
            <el-button size="small" @click="handleEdit(row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 批量操作和分页 -->
      <div class="mt-2" style="text-align: right;">
        <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </el-card>
  </div>

  <!-- 设备详情页面 -->
  <el-dialog v-model="detailVisible" title="设备详情" width="50%">
    <div class="detail-header">
      <h2>设备详情 - {{ currentEquipment.equipmentName }}</h2>
      <el-tabs v-model="activeTab" @tab-click="handleTabChange">
        <el-tab-pane label="基础信息" name="basic"></el-tab-pane>
        <el-tab-pane label="技术参数" name="tech"></el-tab-pane>
        <el-tab-pane label="运行状态" name="status"></el-tab-pane>
        <!-- <el-tab-pane label="维护记录" name="maintenance"></el-tab-pane>
        <el-tab-pane label="故障记录" name="fault"></el-tab-pane>
        <el-tab-pane label="设备档案" name="files"></el-tab-pane> -->
      </el-tabs>
    </div>

    <!-- 基础信息 -->
    <div v-if="activeTab === 'basic'" class="detail-content">
      <h3>基本信息</h3>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="设备编号">{{ currentEquipment.equipmentId || '-' }}</el-descriptions-item>
        <el-descriptions-item label="设备名称">{{ currentEquipment.equipmentName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="设备类型">
          {{ getDictLabel(equipmentTypeOptions, currentEquipment.equipmentType) || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="设备型号">{{ currentEquipment.model || '-' }}</el-descriptions-item>
        <!-- 新增字段开始 -->
        <el-descriptions-item label="生产厂商">{{ currentEquipment.manufacturer || '-' }}</el-descriptions-item>
        <el-descriptions-item label="出厂日期">{{ currentEquipment.purchaseDate || '-' }}</el-descriptions-item>
        <el-descriptions-item label="安装日期">{{ currentEquipment.installationDate || '-' }}</el-descriptions-item>
        <el-descriptions-item label="额定产能">
          {{ currentEquipment.ratedCapacity ? `${currentEquipment.ratedCapacity}` : '-' }}
        </el-descriptions-item>
        <!-- 新增字段结束 -->
        <el-descriptions-item label="使用年限">{{ currentEquipment.useYear || 0 }}年</el-descriptions-item>
      </el-descriptions>

      <h3 style="margin-top: 20px">位置信息</h3>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="所属区域">
          {{ getDictLabel(areaOptions, currentEquipment.area) || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="安装位置">{{ currentEquipment.location || '-' }}</el-descriptions-item>
        <el-descriptions-item label="负责人">{{ currentEquipment.operatorName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ currentEquipment.phone || '-' }}</el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 技术参数 -->
    <div v-if="activeTab === 'tech'" class="detail-content">
      <h3>技术参数</h3>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="额定产能">
          {{ currentEquipment.ratedCapacity ? `${currentEquipment.ratedCapacity}` : '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="运行时长">{{ currentEquipment.runningHours || 0 }}小时</el-descriptions-item>
        <el-descriptions-item label="停机时长">{{ currentEquipment.downtime || 0 }}小时</el-descriptions-item>
        <el-descriptions-item label="故障次数">{{ currentEquipment.failureTimes || 0 }}次</el-descriptions-item>
        <el-descriptions-item label="生产厂家">{{ currentEquipment.manufacturer || '-' }}</el-descriptions-item>
        <el-descriptions-item label="安装位置">{{ currentEquipment.location || '-' }}</el-descriptions-item>
        <el-descriptions-item label="安装日期">{{ currentEquipment.installationDate || '-' }}</el-descriptions-item>
        <el-descriptions-item label="设备型号">{{ currentEquipment.model || '-' }}</el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 运行状态 -->
    <div v-if="activeTab === 'status'" class="detail-content">
      <h3>当前状态</h3>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="运行状态">
          <el-tag :type="getStatusTagType(currentEquipment.equipmentStatus)">
            {{ getDictLabel(equipmentStatusOptions, currentEquipment.equipmentStatus) || '-' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="运行时长">{{ currentEquipment.runningHours || 0 }}小时</el-descriptions-item>
        <el-descriptions-item label="维护周期">{{ currentEquipment.maintenanceCycle || '-' }}</el-descriptions-item>
        <el-descriptions-item label="维护时间">{{ currentEquipment.lastMaintenanceDate || '-' }}</el-descriptions-item>
      </el-descriptions>

      <h3 style="margin-top: 20px">性能指标</h3>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="维护次数">{{ currentEquipment.maintenanceTimes || 0 }}次</el-descriptions-item>
        <el-descriptions-item label="上次维护">{{ currentEquipment.lastMaintenanceDate || '-' }}</el-descriptions-item>
        <el-descriptions-item label="下次维护">{{ currentEquipment.nextMaintenanceDate || '-' }}</el-descriptions-item>
        <el-descriptions-item label="维护计划">{{ currentEquipment.maintenancePlan || '-' }}</el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 维护记录 -->
    <!-- <div v-if="activeTab === 'maintenance'" class="detail-content">
      <el-table :data="maintenanceRecords" border style="width: 100%" v-loading="detailLoading">
        <el-table-column prop="date" label="维护日期" width="120" />
        <el-table-column prop="type" label="维护类型" width="120" />
        <el-table-column prop="content" label="维护内容" />
        <el-table-column prop="person" label="维护人" width="120" />
        <el-table-column prop="result" label="维护结果" width="120" />
      </el-table>
      <div v-if="maintenanceRecords.length === 0" class="no-data">
        暂无维护记录
      </div>
    </div> -->

    <!-- 故障记录 -->
    <!-- <div v-if="activeTab === 'fault'" class="detail-content">
      <el-table :data="faultRecords" border style="width: 100%" v-loading="detailLoading">
        <el-table-column prop="date" label="故障日期" width="120" />
        <el-table-column prop="description" label="故障描述" />
        <el-table-column prop="level" label="故障等级" width="120">
          <template #default="{ row }">
            <el-tag :type="row.level === '严重' ? 'danger' : 'warning'">
              {{ row.level }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="solution" label="解决方案" />
        <el-table-column prop="repairTime" label="修复时间" width="120" />
      </el-table>
      <div v-if="faultRecords.length === 0" class="no-data">
        暂无故障记录
      </div>
    </div> -->

    <!-- 设备档案 -->
    <!-- <div v-if="activeTab === 'files'" class="detail-content">
      <el-table :data="equipmentFiles" border style="width: 100%" v-loading="detailLoading">
        <el-table-column prop="name" label="文件名称" />
        <el-table-column prop="size" label="文件大小" width="120" />
        <el-table-column label="操作" width="120">
          <template #default>
            <el-button type="text">下载</el-button>
            <el-button type="text">预览</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="equipmentFiles.length === 0" class="no-data">
        暂无设备档案
      </div>
    </div> -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="detailVisible = false">关闭</el-button>
        <el-button v-if="currentEquipment.equipmentStatus !== '1'" type="primary" @click="handleEdit(currentEquipment)">
          编辑
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 新增/编辑设备对话框 -->
  <el-dialog v-model="dialogVisible" :title="isEditMode ? '编辑设备信息' : '新增设备'" width="50%" @close="handleDialogClose">
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
      <el-form-item label="设备编号" prop="equipmentId" v-if="isEditMode">
        <el-input v-model="formData.equipmentId" disabled />
      </el-form-item>
      <el-form-item label="设备名称" prop="equipmentName">
        <el-input v-model="formData.equipmentName" placeholder="请输入设备名称" />
      </el-form-item>
      <el-form-item label="设备类型" prop="equipmentType">
        <el-select v-model="formData.equipmentType" placeholder="请选择设备类型" style="width: 100%">
          <el-option v-for="item in equipmentTypeOptions" :key="item.dictValue" :label="item.dictLabel"
            :value="item.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label="设备型号" prop="model">
        <el-input v-model="formData.model" placeholder="请输入设备型号" />
      </el-form-item>
      <el-form-item label="运行状态" prop="equipmentStatus">
        <el-select v-model="formData.equipmentStatus" placeholder="请选择运行状态" style="width: 100%">
          <el-option v-for="item in equipmentStatusOptions" :key="item.dictValue" :label="item.dictLabel"
            :value="item.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label="使用年限" prop="useYear">
        <el-input-number v-model="formData.useYear" :min="0" :max="50" style="width: 100%" />
      </el-form-item>
      <el-form-item label="所属区域" prop="area">
        <el-select v-model="formData.area" placeholder="请选择所属区域" style="width: 100%">
          <el-option v-for="item in areaOptions" :key="item.dictValue" :label="item.dictLabel"
            :value="item.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label="安装位置" prop="location">
        <el-input v-model="formData.location" placeholder="请输入安装位置" />
      </el-form-item>
      <el-form-item label="维护周期" prop="maintenanceCycle">
        <el-select v-model="formData.maintenanceCycle" placeholder="请选择维护周期" style="width: 100%">
          <el-option label="1个月" value="1" />
          <el-option label="3个月" value="3" />
          <el-option label="6个月" value="6" />
          <el-option label="12个月" value="12" />
        </el-select>
      </el-form-item>

      <!-- 新增字段开始 -->
      <el-form-item label="生产厂商" prop="manufacturer">
        <el-input v-model="formData.manufacturer" placeholder="请输入生产厂商" />
      </el-form-item>
      <el-form-item label="安装日期" prop="installationDate">
        <el-date-picker v-model="formData.installationDate" type="date" placeholder="选择安装日期" style="width: 100%"
          value-format="YYYY-MM-DD" />
      </el-form-item>
      <el-form-item label="额定产能" prop="ratedCapacity">
        <el-input-number v-model="formData.ratedCapacity" :min="0" :precision="2" :step="0.1" placeholder="请输入额定产能"
          style="width: 100%" />
      </el-form-item>
      <!-- 新增字段结束 -->

      <el-form-item label="检测人员" prop="operatorName">
        <el-input v-model="formData.operatorName" placeholder="请输入检测人员" />
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="formData.phone" placeholder="请输入联系电话" />
      </el-form-item>
      <el-form-item label="备注信息" prop="remark">
        <el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="请输入备注信息" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  getAreaList,
  getEquipmentTypeList,
  getEquipmentStatusList,
  getEquipmentList,
  addEquipment,
  updateEquipment,
  deleteEquipment,
  exportEquipment,
  getEquipmentDetail
} from '@/api/prod_operate/device/manage/device'

// 搜索表单
const searchForm = reactive({
  equipmentInfo: '',
  equipmentType: '',
  equipmentStatus: '',
  area: '',
  dateRange: [],
  model: '',
  location: ''
})

// 下拉选项数据
const areaOptions = ref([])
const equipmentTypeOptions = ref([])
const equipmentStatusOptions = ref([])

// 表格数据
const equipmentList = ref([])
const loading = ref(false)
const detailLoading = ref(false)

// 分页信息
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 选中的设备ID
const selectedIds = ref([])

// 详情对话框
const detailVisible = ref(false)
const currentEquipment = ref({})
const activeTab = ref('basic')

// 维护记录数据
const maintenanceRecords = ref([])
const faultRecords = ref([])
const equipmentFiles = ref([])

// 新增/编辑对话框
const dialogVisible = ref(false)
const isEditMode = ref(false)
const formRef = ref(null)

// 表单数据 - 添加四个新增字段
const formData = reactive({
  equipmentId: '',
  equipmentName: '',
  equipmentType: '',
  model: '',
  equipmentStatus: '',
  useYear: 0,
  area: '',
  location: '',
  maintenanceCycle: '',
  manufacturer: '',       // 新增：生产厂商
  installationDate: '',   // 新增：安装日期
  ratedCapacity: null,    // 新增：额定产能
  operatorName: '',
  phone: '',
  remark: ''
})

// 表单验证规则 - 添加新增字段的验证
const formRules = {
  equipmentName: [
    { required: true, message: '请输入设备名称', trigger: 'blur' }
  ],
  equipmentType: [
    { required: true, message: '请选择设备类型', trigger: 'change' }
  ],
  model: [
    { required: true, message: '请输入设备型号', trigger: 'blur' }
  ],
  equipmentStatus: [
    { required: true, message: '请选择运行状态', trigger: 'change' }
  ],
  useYear: [
    { required: true, message: '请输入使用年限', trigger: 'blur' }
  ],
  area: [
    { required: true, message: '请选择所属区域', trigger: 'change' }
  ],
  location: [
    { required: true, message: '请输入安装位置', trigger: 'blur' }
  ],
  maintenanceCycle: [
    { required: true, message: '请选择维护周期', trigger: 'change' }
  ],
  // 新增字段验证规则
  manufacturer: [
    { required: true, message: '请输入生产厂商', trigger: 'blur' }
  ],
  installationDate: [
    { required: true, message: '请选择安装日期', trigger: 'change' }
  ],
  ratedCapacity: [
    { required: true, message: '请输入额定产能', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== null && value < 0) {
          callback(new Error('额定产能不能为负数'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  operatorName: [
    { required: true, message: '请输入检测人员', trigger: 'blur' }
  ]
}

// 获取字典标签
const getDictLabel = (options, value) => {
  const item = options.find(item => item.dictValue === value)
  return item ? item.dictLabel : value
}

// 获取状态标签类型
const getStatusTagType = (status) => {
  switch (status) {
    case '0': // 假设0表示正常
      return 'success'
    case '1': // 假设1表示待维护
      return 'warning'
    case '2': // 假设2表示故障
      return 'danger'
    case '3': // 假设3表示停用
      return 'info'
    default:
      return ''
  }
}

// 获取区域列表
const fetchAreaList = async () => {
  try {
    const { data } = await getAreaList()
    areaOptions.value = data || []
  } catch (error) {
    ElMessage.error('获取区域列表失败')
  }
}

// 获取设备类型列表
const fetchEquipmentTypeList = async () => {
  try {
    const { data } = await getEquipmentTypeList()
    equipmentTypeOptions.value = data || []
  } catch (error) {
    ElMessage.error('获取设备类型列表失败')
  }
}

// 获取设备状态列表
const fetchEquipmentStatusList = async () => {
  try {
    const { data } = await getEquipmentStatusList()
    equipmentStatusOptions.value = data || []
  } catch (error) {
    ElMessage.error('获取设备状态列表失败')
  }
}

// 获取设备列表
const fetchEquipmentList = async () => {
  try {
    loading.value = true

    const params = {
      pageNum: pagination.currentPage,
      pageSize: pagination.pageSize,
      ...searchForm
    }

    // 处理日期范围
    if (searchForm.dateRange && searchForm.dateRange.length === 2) {
      params.startTime = searchForm.dateRange[0]
      params.endTime = searchForm.dateRange[1]
    }

    const data = await getEquipmentList(params)
    equipmentList.value = data.rows || []
    pagination.total = data.total || 0
  } catch (error) {
    ElMessage.error('获取设备列表失败')
  } finally {
    loading.value = false
  }
}

// 获取设备详情
const fetchEquipmentDetail = async (id) => {
  try {
    detailLoading.value = true
    const { data } = await getEquipmentDetail(id)
    currentEquipment.value = data || {}

  } catch (error) {
    ElMessage.error('获取设备详情失败')
  } finally {
    detailLoading.value = false
  }
}

// 查询处理
const handleSearch = () => {
  pagination.currentPage = 1
  fetchEquipmentList()
}

// 重置搜索
const resetSearch = () => {
  searchForm.equipmentInfo = ''
  searchForm.equipmentType = ''
  searchForm.equipmentStatus = ''
  searchForm.area = ''
  searchForm.dateRange = []
  searchForm.model = ''
  searchForm.location = ''
  handleSearch()
}

// 分页处理
const handleSizeChange = (val) => {
  pagination.pageSize = val
  fetchEquipmentList()
}

const handleCurrentChange = (val) => {
  pagination.currentPage = val
  fetchEquipmentList()
}

// 选择处理
const handleSelectionChange = (selection) => {
  selectedIds.value = selection.map(item => item.id)
}

// 显示设备详情
const showEquipmentDetail = (row) => {
  fetchEquipmentDetail(row.id);
  detailVisible.value = true
  activeTab.value = 'basic'
}

// 切换标签页
const handleTabChange = (tab) => {
  activeTab.value = tab.paneName
}

// 显示新增对话框
const showAddDialog = () => {
  isEditMode.value = false
  dialogVisible.value = true
}

// 编辑设备
const handleEdit = async (row) => {
  isEditMode.value = true
  console.log(row);

  const {data} = await getEquipmentDetail(row.id);
  Object.assign(formData, data)
  dialogVisible.value = true
}

// 删除设备
const handleDelete = (id) => {
  ElMessageBox.confirm('确认删除该设备吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      await deleteEquipment(id)
      ElMessage.success('删除成功')
      fetchEquipmentList()
    } catch (error) {
      ElMessage.error('删除失败')
    }
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// 对话框关闭处理
const handleDialogClose = () => {
  formRef.value?.resetFields()
  Object.keys(formData).forEach(key => {
    if (key === 'useYear') {
      formData[key] = 0
    } else if (key === 'ratedCapacity') {
      formData[key] = null
    } else {
      formData[key] = ''
    }
  })
}

// 提交表单
const submitForm = async () => {
  try {
    await formRef.value.validate()

    if (isEditMode.value) {
      // 编辑设备
      await updateEquipment(formData)
      ElMessage.success('修改成功')
    } else {
      // 新增设备
      await addEquipment(formData)
      ElMessage.success('新增成功')
    }

    dialogVisible.value = false
    fetchEquipmentList()
  } catch (error) {
    if (error.response) {
      ElMessage.error(error.response.data.msg || '操作失败')
    }
  }
}

// 导出数据
const exportData = async () => {
  try {
    const params = { ...searchForm }

    // 处理日期范围
    if (searchForm.dateRange && searchForm.dateRange.length === 2) {
      params.startTime = searchForm.dateRange[0]
      params.endTime = searchForm.dateRange[1]
    }

    const response = await exportEquipment(params)

    // 创建下载链接
    const url = window.URL.createObjectURL(new Blob([response]))
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', '设备列表.xlsx')
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)

    ElMessage.success('导出成功')
  } catch (error) {
    ElMessage.error('导出失败')
  }
}

onMounted(() => {
  fetchAreaList()
  fetchEquipmentTypeList()
  fetchEquipmentStatusList()
  fetchEquipmentList()
})
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.detail-header {
  margin-bottom: 20px;
}

.detail-content {
  padding: 10px;
}

.mt-2 {
  margin-top: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.no-data {
  text-align: center;
  padding: 20px;
  color: #909399;
  font-size: 14px;
}
</style>